<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MVCWeb.Models.EventPictureGallery>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery.galleria.js") %>'></script>

    <h2>
        Event Gallery</h2>
        <div id="gallery">
        <%--<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0"
            width="800" height="690" id="gallery" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
            <param name="movie" value="/Gallery/gallery.swf" />
            <param name="quality" value="high" />
            <param name="scale" value="noscale" />
            <param name="bgcolor" value="#000000" />
            <embed src="/Gallery/gallery.swf" quality="high" allowfullscreen="true" scale="noscale"
                bgcolor="#000000" width="800" height="690" name="gallery" align="middle" allowscriptaccess="sameDomain"
                type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>--%>

        <script type="text/javascript">

            jQuery(function($) {

                $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

                $('ul.gallery_demo').galleria({
                    history: true, // activates the history object for bookmarking, back-button etc.
                    clickNext: true, // helper for making the image clickable
                    insert: '#main_image', // the containing selector for our main image
                    onImage: function(image, caption, thumb) { // let's add some image effects for demonstration purposes

                        // fade in the image & caption
                        if (!($.browser.mozilla && navigator.appVersion.indexOf("Win") != -1)) { // FF/Win fades large images terribly slow
                            image.css('display', 'none').fadeIn(1000);
                        }
                        caption.css('display', 'none').fadeIn(1000);

                        // fetch the thumbnail container
                        var _li = thumb.parents('li');

                        // fade out inactive thumbnail
                        _li.siblings().children('img.selected').fadeTo(500, 0.3);

                        // fade in active thumbnail
                        thumb.fadeTo('fast', 1).addClass('selected');

                        // add a title for the clickable image
                        image.attr('title', 'Next image >>');
                    },
                    onThumb: function(thumb) { // thumbnail effects goes here

                        // fetch the thumbnail container
                        var _li = thumb.parents('li');

                        // if thumbnail is active, fade all the way.
                        var _fadeTo = _li.is('.active') ? '1' : '0.3';

                        // fade in the thumbnail when finnished loading
                        thumb.css({ display: 'none', opacity: _fadeTo }).fadeIn(1500);

                        // hover effects
                        thumb.hover(
					function() { thumb.fadeTo('fast', 1); },
					function() { _li.not('.active').children('img').fadeTo('fast', 0.3); } // don't fade out if the parent is active
				)
                    }
                });
            });
	
        </script>

        <div class="demo">
            <div id="main_image">
            </div>
            <ul class="gallery_demo_unstyled">
                <% foreach (var item in Model)
                   { %>
                <li>
                    <img src="<%= Html.Encode(item.ImagePath) %>" alt="<%= Html.Encode(item.Caption) %>" title="<%= Html.Encode(item.Caption) %>" /></li>
                <% } %>
            </ul>
            <p class="nav">
                <a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
